<style>
    div[date] a {
        margin-left: 20px;
    }
</style>
<div class="layuimini-container f-tool-fixed">
    <form id="app-form" class="layui-form layuimini-form">
        <input type="hidden" name="update_time" value="{$row.update_time|default=''}">
        <div class="f-tool">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>
                {:lang('common.btn_save')}
            </button>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('template.name')}</label>
            <div class="layui-input-inline layui-form-mid layui-word-aux w-750">
                <input type="hidden" name="template_id" value="{$template.id|default=''}">
                {$template.code} {$template.name}
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('route.start')}</label>
            <div class="layui-input-inline">
                <input type="text" name="start" class="layui-input cssDate" lay-verify="required"
                       placeholder="{:lang('common.choose')}{:lang('route.start')}"
                       value="{$row.start|default=''}" minDate="%y-%M-%d">
            </div>
            {if empty($row['id'])}
            <div class="layui-input-inline">
                <button id="btnAddDate" type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                        onclick="addDate(this)">
                    {:lang('route.btn_add_date')}
                </button>
            </div>
            {/if}
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('route.person_num')}</label>
            <div class="layui-input-inline">
                <input type="text" name="person_num" class="layui-input" value="{$row.person_num|default=''}"
                       placeholder="{:lang('common.input')}{:lang('route.person_num')}" lay-verify="required"
                       onkeyup="javascript:onlyInteger(this)">
            </div>
            <div class="layui-form-mid layui-word-aux">{:lang('common.person')}</div>
            <label class="layui-form-label">{:lang('route.single_price')}</label>
            <div class="layui-input-inline">
                <input type="text" name="single_price" class="layui-input" value="{$row.single_price|default=''}"
                       placeholder="{:lang('common.input')}{:lang('route.single_price')}" lay-verify="required"
                       onkeyup="javascript:onlyNumber(this)">
            </div>
            <div class="layui-form-mid layui-word-aux">{:lang('common.money_unit')}</div>
        </div>

        {if !empty($row['id'])}
        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('common.status')}</label>
            <div class="layui-input-inline">
                <select name="status" lay-verify="required" default-value="{$row.status|default=''}"
                        data-select-type="route_status_list">
                </select>
            </div>
        </div>
        {/if}

        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('route.price')}</label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:25%">{:lang('route.price_type')}</th>
                        <th style="width:25%">{:lang('route.market_price')}</th>
                        <th style="width:25%">{:lang('route.peer_price')}</th>
                        <th style="width:25%">{:lang('route.cost_price')}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{:lang('route.adult')}</td>
                        <td><input type="text" name="adult_market_price" class="layui-input" lay-verify="required"
                                   placeholder="{:lang('common.input')}{:lang('route.adult_market_price')}"
                                   value="{$row.adult_market_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                        <td><input type="text" name="adult_peer_price" class="layui-input" lay-verify="required"
                                   placeholder="{:lang('common.input')}{:lang('route.adult_peer_price')}"
                                   value="{$row.adult_peer_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                        <td><input type="text" name="adult_cost_price" class="layui-input" lay-verify="required"
                                   placeholder="{:lang('common.input')}{:lang('route.adult_cost_price')}"
                                   value="{$row.adult_cost_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                    </tr>
                    <tr>
                        <td>{:lang('route.child')}</td>
                        <td><input type="text" name="child_market_price" class="layui-input"
                                   placeholder="{:lang('common.input')}{:lang('route.child_market_price')}"
                                   value="{$row.child_market_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                        <td><input type="text" name="child_peer_price" class="layui-input"
                                   placeholder="{:lang('common.input')}{:lang('route.child_peer_price')}"
                                   value="{$row.child_peer_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                        <td><input type="text" name="child_cost_price" class="layui-input"
                                   placeholder="{:lang('common.input')}{:lang('route.child_cost_price')}"
                                   value="{$row.child_cost_price|default=''}" onkeyup="javascript:onlyNumber(this)">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['myApp'], function () {
        let $ = layui.jquery
            , myCommon = layui.myCommon;

        window.addDate = function (dom) {
            let start = $(dom).closest('.layui-form-item').find('input').val();
            if (start == '') {

                return false;
            }
            let $dates = $('#dates');
            if ($dates.size() == 0) {
                $(dom).closest('.layui-form-item').after('<div class="layui-form-item">'
                    + '<label class="layui-form-label"></label><div id="dates" class="layui-input-inline"></div></div>');
                $dates = $('#dates');
            }
            $dates.append('<div date="' + start + '">' + start
                + '<a href="#" onclick="return removeDate(this)">{:lang("common.btn_delete")}</a></div>');
        }

        window.removeDate = function (dom) {
            $(dom).closest('[date]').remove();
        }
        myCommon.listen(function (data) {
            let isNew = $('#btnAddDate').size() == 1, $dates = $('#dates'), dates = [];
            if (isNew) {
                if ($dates.size() == 1) {
                    $dates.find('[date]').each(function () {
                        dates.push($(this).attr('date'));
                    })
                }
                data.dates = dates.join(',');
            }
            return data;
        });
    });
</script>